<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 显示省 -->
    <select id="province">
    </select>
    <!-- 显示市 -->
    <select id="city">
    </select>
    <!-- 显示区 -->
    <select id="citySon">
    </select>
    <script>
        let cityArr = [
            {
                name: '湖北省', city: [
                    { name: '武汉市', city: ['武汉市A区', '武汉市B区', '武汉市C区'] },
                    { name: '孝感市', city: ['孝感市A区', '孝感市B区', '孝感市C区'] },
                    { name: '黄石市', city: ['黄石市A区', '黄石市B区', '黄石市C区'] },
                    { name: '十堰市', city: ['十堰市A区', '十堰市B区', '十堰市C区'] },
                ]
            }, {
                name: '湖南省', city: [
                    { name: '长沙市', city: ['长沙市A区', '长沙市B区', '长沙市C区'] },
                    { name: '株洲市', city: ['株洲市A区', '株洲市B区', '株洲市C区'] },
                    { name: '湘潭市', city: ['湘潭市A区', '湘潭市B区', '湘潭市C区'] },
                    { name: '衡阳市', city: ['衡阳市A区', '衡阳市B区', '衡阳市C区'] },
                ]
            }
        ]
        let province = document.querySelector('#province')
        let city = document.querySelector('#city');
        let citySon = document.querySelector('#citySon');
        //渲染页面
        (() => {
            cityArr.forEach((v, index) => {
                let option = document.createElement('option')
                option.innerText = v.name
                option.value = index
                province.appendChild(option)
                if (index == 0) {
                    v.city.forEach((v, index) => {
                        let option = document.createElement('option')
                        option.innerText = v.name
                        option.value = index
                        city.appendChild(option)
                        if (index == 0) {
                            v.city.forEach((v, index) => {
                                let option = document.createElement('option')
                                option.innerText = v
                                option.value = index
                                citySon.appendChild(option)
                            });
                        }
                    });
                }
            });
        })()
        //改变一级菜单时修改子级菜单内容
        province.onchange = function () {
            city.innerHTML = '';
            citySon.innerHTML = '';
            cityArr.forEach((v, index) => {
                if (index == this.value) {
                    v.city.forEach((v, index) => {
                        let option = document.createElement('option')
                        option.innerText = v.name
                        option.value = index
                        city.appendChild(option)
                        if (index == 0) {
                            v.city.forEach((v, index) => {
                                let option = document.createElement('option')
                                option.innerText = v
                                option.value = index
                                citySon.appendChild(option)
                            });
                        }
                    });
                }
            });
        }
        //改变二级菜单时修改子级菜单内容
        city.onchange = function () {
            citySon.innerHTML = '';
            console.log(cityArr[province.value]);
            cityArr[province.value].city.forEach((v, index) => {
                if (index == this.value) {
                    v.city.forEach((v, index) => {
                        let option = document.createElement('option')
                        option.innerText = v
                        option.value = index
                        citySon.appendChild(option)
                    })
                }
            })
        }
    </script>
</body>

</html>